<template>
<div class="leading-container">
    <div class="leading-but">
        <div class="new-build-box">
            <el-button type="primary" icon="el-icon-plus" v-show="!isAdd" @click="isAdd=true" v-if="_SHOWBTN('wzgl-lzda-ldjg-xj')">新建</el-button>
        </div>
    </div>
    <!--表格区域开始-新建-->
    <div class="leading-list-box" v-show="isAdd">
        <!--表单区域-->
        <el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
            <!--名称-->
            <el-form-item prop="organName" label="名称:" :rules="[
      { required: true, message: '请输入名称', trigger: 'blur' },]">
                <el-input v-model="dynamicValidateForm.organName"></el-input>
            </el-form-item>
            <!--岗位名称-->
            <div v-for="(domain, index) in dynamicValidateForm.domains" :key="index" class="input-box">
                <el-form-item label="岗位名称:" :prop="'domains.' + index + '.postName'" :rules="{
      required: true, message: '请输入岗位名称', trigger: 'blur'
    }">
                    <el-input v-model="domain.postName"></el-input>
                    <el-button @click="addDomain" type="add">添加</el-button>
                    <el-button @click.prevent="removeDomain(domain)" type="clear" v-if="isClearTrue!==index">删除</el-button>
                </el-form-item>
                <!--右侧循环-->
                <div class="right-input">
                    <el-form-item v-for="(item, i) in domain.personNameParamList" :key="i" label="岗位名称:" :prop="'domains.' + index +'.personNameParamList.'+ i + '.personName'" :rules="{
      required: true, message: '请输入岗位名称', trigger: 'blur'
    }">
                        <el-input v-model="item.personName"></el-input>
                        <el-button @click="addDomainTwo(index)" type="add">添加</el-button>
                        <el-button @click.prevent="removeDomainTwo(item ,index)" type="clear" v-if="isClearTrue!==i">删除</el-button>
                    </el-form-item>
                </div>
            </div>

            <!--提交按钮-->
            <el-form-item class="button-group">
                <el-button type="cancel" @click="resetForm('dynamicValidateForm')">取消</el-button>
                <el-button type="primary" @click="submitForm('dynamicValidateForm')">保存并更新</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--表格区域结束-新建-->
    <!--获取展示和编辑之间的切换-开始-->
    <div class="change-box" v-for="(item,index) in tableList" :key="index">
        <!--获取展示-开始-->
        <div class="list-box" v-if="!item.isEdit">
            <div class="list-top">
                <h1>{{item.name}}</h1>
                <div class="button-group">
                    <el-button type="up" @click="goUp(item.id)" v-if="_SHOWBTN('wzgl-lzda-ldjg-up')">上移</el-button>
                    <el-button type="down" @click="goDown(item.id)" v-if="_SHOWBTN('wzgl-lzda-ldjg-down')">下移</el-button>
                    <el-button type="edit" @click="gobianji(item,index)" v-if="_SHOWBTN('wzgl-lzda-ldjg-xg')">编辑</el-button>
                    <el-button type="clear" @click="goDelete(item.id)" v-if="_SHOWBTN('wzgl-lzda-ldjg-sc')">删除</el-button>
                    <el-button type="back" v-if="item.isOpen" @click="item.isOpen=false">收起</el-button>
                    <el-button type="back" v-else @click="item.isOpen=true">展开</el-button>
                </div>
            </div>
            <div class="list" v-show="item.isOpen">
                <div class="list-body" v-for="(v,i) in item.postNameVoList" :key="i">
                    <div class="item-name-box">
                        <div class="item-lable">{{v.name}}</div>
                        <div class="item-name" v-for="(value,index2) in v.personNameVoList" :key="index2">{{value.name}}</div>
                    </div>
                </div>
            </div>
        </div>
        <!--获取展示-结束-->
        <!--表格区域开始-新建-->
        <div class="leading-list-box" v-if="item.isEdit">
            <!--表单区域-->
            <el-form :model="dynamicValidateFormTwo[index]" ref="dynamicValidateFormTwo" label-width="100px" class="demo-dynamic">
                <!--名称-->
                <el-form-item prop="organName" label="名称:" :rules="[
      { required: true, message: '请输入名称', trigger: 'blur' },]">
                    <el-input v-model="dynamicValidateFormTwo[index].organName"></el-input>
                </el-form-item>
                <!--岗位名称-->
                <div v-for="(domain, index) in dynamicValidateFormTwo[index].domains" :key="index" class="input-box">
                    <el-form-item label="岗位名称:" :prop="'domains.' + index + '.name'" :rules="{
      required: true, message: '请输入岗位名称', trigger: 'blur'
    }">
                        <el-input v-model="domain.name"></el-input>
                        <el-button @click="addDomainfu" type="add">添加</el-button>
                        <el-button @click.prevent="removeDomainfu(domain)" type="clear" v-if="isClearTrue!==index">删除</el-button>
                    </el-form-item>
                    <!--右侧循环-->
                    <div class="right-input">
                        <el-form-item v-for="(item, i) in domain.personNameVoList" :key="i" label="人员名称:" :prop="'domains.' + index +'.personNameVoList.'+ i + '.name'" :rules="{
      required: true, message: '请输入岗位名称', trigger: 'blur'
    }">
                            <el-input v-model="item.name"></el-input>
                            <el-button @click="addDomainTwozi(index)" type="add">添加</el-button>
                            <el-button @click.prevent="removeDomainTwozi(item ,index)" type="clear" v-if="isClearTrue!==i">删除</el-button>
                        </el-form-item>
                    </div>
                </div>

                <!--提交按钮-->
                <el-form-item class="button-group">
                    <el-button type="cancel" @click="resetFormTwo(item)">取消</el-button>
                    <el-button type="primary" @click="submitFormzi('dynamicValidateFormTwo',item,index)">保存并更新</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格区域结束-新建-->
    </div>

    <!--获取展示和编辑之间的切换-结束-->

    <!--删除按钮的弹窗-->
    <el-dialog width="432px" title="删除提示" :visible.sync="deleteAllVisible">
        <i>
            <img src="@/assets/image/Shape.png" alt />
        </i>
        <span>确定删除此领导机构吗？</span>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="ClearAll">确 定</el-button>
            <el-button type="cancel" @click="deleteAllVisible = false">取 消</el-button>
        </span>
    </el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            Editsave: {},
            isClearTrue: 0,

            // 新建的数据结构
            dynamicValidateForm: {
                domains: [{
                    personNameParamList: [{
                        personName: "",
                    }, ],
                    postName: "",
                }, ],
                //新建的第一个框
                organName: "",
            },

            //删除和上移下移需要用到的id
            id: "",
            deleteAllVisible: false,
            isOpen: true,
            //组织机构获取列表时展示
            activeNames: ["1"],
            //=====
            //控制新建区域是否出现
            isAdd: false,
            //编辑
            dynamicValidateFormTwo: [{
                domains: [{
                    personNameVoList: [{
                        name: "",
                    }, ],
                    name: "",
                }, ],
                //新建的第一个框
                organName: "",
            }],
            //领导机构列表
            tableList: [],

        };
    },
    created() {
        this.getleadinglist();
    },
    methods: {
        //编辑取消
        resetFormTwo(item) {
            item.isEdit = false;

        },
        //编辑安妮u
        gobianji(item, index) {
            // this.getDanganLeadingDETAILS(item.id, index);
            this.Api.getDanganLeadingDETAILS({
                id: item.id,
            }).then((res) => {
                if (res) {
                    // this.dynamicValidateFormTwo[index].domains = res.data.postNameVoList;
                    // this.dynamicValidateFormTwo[index].organName = res.data.name;

                    this.dynamicValidateFormTwo[index] = {
                        domains: res.data.postNameVoList,
                        //新建的第一个框
                        organName: res.data.name,
                    }
                    this.$set(this.dynamicValidateFormTwo, index, {
                        domains: res.data.postNameVoList,
                        //新建的第一个框
                        organName: res.data.name,
                    });
                    this.Editsave = res.data;
                    item.isEdit = true;
                }
            });

        },
        //编辑按钮获取详情展示
        getDanganLeadingDETAILS(id, index) {
            this.Api.getDanganLeadingDETAILS({
                id: id,
            }).then((res) => {
                if (res) {
                    // this.dynamicValidateFormTwo[index].domains = res.data.postNameVoList;
                    // this.dynamicValidateFormTwo[index].organName = res.data.name;

                    this.dynamicValidateFormTwo[index] = {
                        domains: res.data.postNameVoList,
                        //新建的第一个框
                        organName: res.data.name,
                    }
                    this.$set(this.dynamicValidateFormTwo, index, {
                        domains: res.data.postNameVoList,
                        //新建的第一个框
                        organName: res.data.name,
                    });
                    this.Editsave = res.data;

                }
            });
            console.log(this.dynamicValidateFormTwo, "this.dynamicValidateFormTwo")
        },
        //父类的添加
        addDomainfu() {
            this.dynamicValidateFormTwo.domains.push({
                personNameVoList: [{
                    name: "",
                }, ],
                name: "",
            });
        },
        //父类的删除
        removeDomainfu(item) {
            console.log(item, "item")
            if (item.id) {
                this.Api.getDanganLeadingEditLeftClear({
                    id: item.id
                }).then(res => {
                    if (res) {
                        var index = this.dynamicValidateFormTwo.domains.indexOf(item);
                        if (index !== -1) {
                            this.dynamicValidateFormTwo.domains.splice(index, 1);
                        }

                    }
                })
            } else {
                var index = this.dynamicValidateFormTwo.domains.indexOf(item);
                if (index !== -1) {
                    this.dynamicValidateFormTwo.domains.splice(index, 1);
                }
            }

        },
        //子类的添加
        addDomainTwozi(index) {
            this.dynamicValidateFormTwo.domains[index].personNameVoList.push({
                name: "",
            });
        },
        //子类的删除
        removeDomainTwozi(item, index) {
            if (item.id) {
                this.Api.getDanganLeadingEditRightClear({
                    id: item.id
                }).then(res => {
                    if (res) {
                        var i = this.dynamicValidateFormTwo.domains[
                            index
                        ].personNameVoList.indexOf(item);
                        // console.log(i, "i");
                        if (i !== -1) {
                            this.dynamicValidateFormTwo.domains[index].personNameVoList.splice(
                                i,
                                1
                            );
                        }
                    }
                })
            } else {
                var i = this.dynamicValidateFormTwo.domains[
                    index
                ].personNameVoList.indexOf(item);
                // console.log(i, "i");
                if (i !== -1) {
                    this.dynamicValidateFormTwo.domains[index].personNameVoList.splice(
                        i,
                        1
                    );
                }
            }

        },
        //修改后提交
        submitFormzi(formName, item, index) {
            // console.log(this.$refs[formName][0], "this.$refs[formName]")
            this.$refs[formName][0].validate((valid) => {
                if (valid) {
                    // alert("submit!");
                    // 处理数据
                    let newArr = []
                    let childArr = []
                    this.dynamicValidateFormTwo[index].domains.forEach(function (item, index) {
                        childArr = []
                        item.personNameVoList.forEach(function (v, i) {

                            if (v.id) {
                                childArr.push({
                                    id: v.id,
                                    personName: v.name
                                })
                            } else {
                                childArr.push({
                                    personName: v.name
                                })
                            }

                        })
                        // console.log(childArr, "childArr")
                        if (item.id) {
                            newArr.push({
                                id: item.id,
                                postName: item.name,
                                personNameEditParamList: childArr
                            })
                        } else {
                            newArr.push({
                                postName: item.name,
                                personNameEditParamList: childArr
                            })
                        }
                        // console.log(newArr, "newArr")
                    })
                    this.Api.getDanganLeadingEditSave({
                        id: this.Editsave.id,
                        organName: this.dynamicValidateFormTwo[index].organName,
                        postNameEditParamList: newArr,
                    }).then((res) => {
                        if (res) {
                            // console.log(res, "编辑提交安妮");
                            this.$message.success("编辑成功");
                            item.isEdit = false;
                            this.getleadinglist();
                        }
                    });
                } else {
                    this.$message.error("编辑失败");
                    return false;
                }
            });
        },
        //-------------------------
        //删除接口
        ClearAll() {
            this.Api.getDanganLeadingClear({
                id: this.id,
            }).then((res) => {
                if (res) {
                    this.$message.success("删除成功");
                    this.getleadinglist();
                    this.deleteAllVisible = false;
                }
            });
        },
        goDelete(id) {
            this.deleteAllVisible = true;
            this.id = id;
        },
        //上移按钮
        goUp(id) {
            this.Api.getDanganLeadingup({
                id: id,
            }).then((res) => {
                if (res) {
                    this.$message.success("上移成功");
                    this.getleadinglist();
                }
            });
        },
        //xia移按钮
        goDown(id) {
            this.Api.getDanganLeadingDown({
                id: id,
            }).then((res) => {
                if (res) {
                    this.$message.success("下移成功");
                    this.getleadinglist();
                }
            });
        },
        // 获取展示
        getleadinglist() {
            this.Api.getleadinglist().then((res) => {
                this.tableList = res.data;
                this.tableList.map((item) => {
                    this.$set(item, "isOpen", false);
                    this.$set(item, "isEdit", false);
                });
                // console.log(this.tableList, "领导机构列表");
            });
        },
        // 表单提交事件
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert("submit!");
                    this.Api.getDanganLeadingAdd({
                        organName: this.dynamicValidateForm.organName,
                        postNameParamList: this.dynamicValidateForm.domains,
                    }).then((res) => {
                        if (res) {
                            // console.log(res, "提交安妮")
                            this.dynamicValidateForm = {
                                domains: [{
                                    personNameParamList: [{
                                        personName: "",
                                    }, ],
                                    postName: "",
                                }, ],
                                //新建的第一个框
                                organName: "",
                            };
                            this.isAdd = false;
                            this.getleadinglist();
                        }
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        // 重置表单的方法@click="resetForm('dynamicValidateForm')"
        resetForm(formName) {
            // this.$refs[formName].resetFields();
            this.dynamicValidateForm = {
                domains: [{
                    personNameParamList: [{
                        personName: "",
                    }, ],
                    postName: "",
                }, ],
                //新建的第一个框
                organName: "",
            };
            this.isAdd = false;
            this.$refs[formName].resetFields();
        },
        //删除单个输入框的方法-左侧
        removeDomain(item) {
            var index = this.dynamicValidateForm.domains.indexOf(item);
            if (index !== -1) {
                this.dynamicValidateForm.domains.splice(index, 1);
            }
        },
        //删除单个输入框的方法-右侧
        removeDomainTwo(item, index) {
            var i = this.dynamicValidateForm.domains[
                index
            ].personNameParamList.indexOf(item);
            console.log(i, "i");
            if (i !== -1) {
                console.log(1);
                this.dynamicValidateForm.domains[index].personNameParamList.splice(
                    i,
                    1
                );
            }
            // console.log(this.dynamicValidateForm.domains[index].personNameParamList, "this.dynamicValidateForm.domains[index].personNameParamList")
        },
        //增加一个输入框的方法.左侧
        addDomain() {
            this.dynamicValidateForm.domains.push({
                personNameParamList: [{
                    personName: "",
                }, ],
                postName: "",
            });
        },
        //增加一个输入框的方法.右侧
        addDomainTwo(index) {
            this.dynamicValidateForm.domains[index].personNameParamList.push({
                personName: "",
            });
        },
    },
};
</script>

<style lang="less" scoped>
.leading-container {
    // background: #f8f8f9;
    padding-top: 20px;

    .el-button--add {
        padding: 0;
        width: 60px;
        height: 36px;
        background: #f0f2f5;
        border-radius: 3px;
        border: 1px solid #d7dbe0;
        margin: 0 10px 0 10px;
    }

    .el-button--clear {
        padding: 0;
        width: 60px;
        height: 36px;
        background: #fb363f;
        border-radius: 4px;
        color: #ffffff;
    }

    .leading-but {

        .new-build-box {
            display: flex;
            justify-content: flex-end;
            background: #f8f8f9;
            padding: 20px;
            margin-bottom: 46px;

            .el-button--primary {
                padding: 10px 15px;
            }
        }
    }

    /deep/.leading-list-box {
        padding-top: 20px;
        padding-right: 20px;
        border: 1px solid #3d7fff;
        margin-top: 20px;
        background: #f8f8f9;

        .el-input {
            width: 360px;

            .el-input__inner {
                height: 36px;
            }
        }

        .demo-dynamic {
            .input-box {
                display: flex;

                .el-form-item {
                    margin-right: 20px;
                    width: 610px;
                }
            }

            //底部按钮组
            .button-group {
                .el-form-item__content {
                    display: flex;
                    justify-content: flex-end;

                    .el-button--primary {
                        padding: 0;
                        width: 94px;
                        height: 36px;
                    }

                    .el-button--cancel {
                        padding: 0;
                        width: 94px;
                        height: 36px;
                    }
                }
            }
        }
    }

    /deep/.list-box {
        margin-top: 0px;

        .list-top {
            display: flex;
            justify-content: space-between;
            padding: 27px 20px 10px 27px;
            border-bottom: 1px solid #ebebeb;

            h1 {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 22px;
            }

            .button-group {
                .el-button {
                    width: 60px;
                    height: 28px;
                    padding: 0;
                    border-radius: 3px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    line-height: 22px;
                }

                .el-button--up {
                    color: #333333;
                }

                .el-button--down {
                    color: #333333;
                }

                .el-button--edit {
                    background: #3d7fff;
                    color: #ffffff;
                }

                .el-button--back {
                    background: #ffffff;
                    border-radius: 3px;
                    border: 1px solid #3d7fff;

                    color: #3d7fff;
                }
            }
        }

        .list {
            padding: 12px 0;
            background: #f8f8f9;

            .list-body {
                padding: 12px 25px;

                .item-name-box {
                    display: flex;
                    justify-content: start;

                    .item-lable {
                        font-size: 14px;
                        font-family: PingFangSC-Medium, PingFang SC;
                        font-weight: 600;
                        color: #333333;
                        line-height: 20px;
                        margin-right: 25px;
                    }

                    .item-name {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #7a7a7a;
                        line-height: 20px;
                        margin-right: 25px;
                    }
                }
            }
        }
    }
}

// 删除按钮的弹窗样式

/deep/.el-dialog {
    margin-top: 19% !important;
    box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15);
    border-radius: 4px;

    >.el-dialog__header {
        padding-left: 70px;
        padding-bottom: 0;

        >span {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: rgba(0, 0, 0, 0.85);
            line-height: 24px;
        }
    }

    >.el-dialog__body {
        padding-left: 70px;
        padding-top: 12px;
        padding-bottom: 24px;
        position: relative;

        >i {
            position: absolute;
            left: 32px;
            top: -22px;
        }

        >span {
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
        }
    }

    >.el-dialog__footer {
        .el-button--primary {
            width: 65px;
            height: 32px;
            background: rgba(22, 119, 255, 1);
            padding: 0;
            color: white;
        }

        .el-button--cancel {
            width: 65px;
            height: 32px;
            background: rgba(250, 250, 250, 1);
            border: 1px solid rgba(221, 221, 221, 1);
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: rgba(102, 102, 102, 1);
            padding: 0;
            margin-left: 8px;
        }
    }
}
</style>
